<!-- 客户管理-基础设置-客户跟进成效设置 -->
<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="save">保存</a-button>
        <a-button @click="cancel">取消</a-button>
      </template>
    </pageHeader>
    <div class="client-effect-setting">
      <h3>客户跟进状态反映当前客户关系或交易推进的程度</h3>
      <a-space>
        <a-button type="primary" @click="edit">点击编辑</a-button>
      </a-space>
      <div class="client-effect-setting-box">
        <div class="state-line">
          <a-timeline mode="left" labelPosition="relative">
            <a-timeline-item
              dot-type="hollow"
              v-for="(item, index) in stateLine"
              :label="`状态${index + 1}`"
              :key="index"
            >
              <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                <div v-if="index !== stateLine.length - 1">
                  <a-input
                    :style="{
                      width: '150px',
                      borderRadius: 'calc(36px * 0.5)',
                      textAlign: 'center',
                    }"
                    v-model="item.name"
                    :disabled="!isEdit"
                    show-word-limit
                    placeholder=""
                    allow-clear
                  />
                  <!-- <icon-edit v-if="isEdit" /> -->
                  <icon-delete
                    style="cursor: pointer"
                    v-if="index > 0 && isEdit"
                    @click="deleteState(index)"
                  />
                  <div
                    v-if="isEdit"
                    :style="{
                      display: 'inline-block',
                      marginLeft: '10px',
                    }"
                  >
                    <span style="margin-right: 15px">是否必填</span>
                    <a-switch
                      :default-checked="item.isRequire === 1 ? true : false"
                      @change="switchRequire(index)"
                    >
                      <template #checked> 开 </template>
                      <template #unchecked> 关 </template>
                    </a-switch>
                  </div>
                </div>
                <div v-else>
                  <a-button
                    :disabled="!isEdit"
                    style="color: #000"
                    type="outline"
                    shape="round"
                    size="large"
                    :style="{
                      width: '150px',
                      height: '32px',
                      color: '#2d5cf6',
                    }"
                    @click="addState"
                    >+ 添加状态</a-button
                  >
                </div>
              </a-row>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
    </div>
    <a-modal
      :closable="false"
      v-model:visible="isDeleteState"
      @cancel="handleCancel"
      :on-before-ok="delhandleBeforeOk"
      unmountOnClose
      :mask-closable="false"
    >
      <template #title> 删除状态 </template>
      <div> 是否确定删除这个状态？ </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    GetClientStateSet,
    PutClientStateSet,
    DelClientStateSet,
  } from '@/api/order-management/client-management/base-setting';
  import { ClientStateSettingInfo } from '@/types/order';
  import pageHeader from '@/components/page-header/index.vue';
  import { catchClause } from '@babel/types';
  import { Message } from '@arco-design/web-vue';

  const router = useRouter();
  const title: string = '客户跟进状态设置';

  const breadCrumb: string[] = [
    '订单管理',
    '客户管理',
    '基础设置',
    '客户跟进状态设置',
  ];

  let stateLine = ref<Array<ClientStateSettingInfo>>([]);

  // 获取跟进成效数据
  const getClientStateSet = async () => {
    try {
      const res = await GetClientStateSet();
      // res.forEach((item: ClientStateSettingInfo) => {
      //   stateLine.push(item);
      // });
      stateLine.value = res;
      stateLine.value.push({
        name: '',
        isRequire: 1,
        isDefault: 0,
      });
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getClientStateSet();

  let isEdit = ref<boolean>(false); // 判断用户是否点击编辑按钮

  // 点击编辑按钮
  const edit = () => {
    isEdit.value = !isEdit.value;
  };

  // 修改是否必填状态
  const switchRequire = (index: number) => {
    if (stateLine.value[index].isRequire === 0)
      stateLine.value[index].isRequire = 1;
    else stateLine.value[index].isRequire = 0;
  };

  // 添加一个新的状态
  const addState = () => {
    stateLine.value.push({
      name: '',
      isRequire: 1,
      isDefault: 0,
    });
  };

  let currDelId: number = -1; // 获取当前要删除的状态id
  let currDelIndex: number = -1; // 获取当前要删除状态的index
  let isDeleteState = ref<boolean>(false); // 判断用户是否点击删除按钮
  // 删除一个状态
  const deleteState = (index: number) => {
    isDeleteState.value = true;
    currDelId = stateLine.value[index].id as number;
    currDelIndex = index;
  };

  // 删除状态弹出框确认按钮
  const delhandleBeforeOk = async () => {
    if (currDelId) {
      try {
        await DelClientStateSet(currDelId);
        stateLine.value.splice(currDelIndex, 1);
        isDeleteState.value = false;
      } catch (error: unknown) {
        console.log(error);
      }
    } else stateLine.value.splice(currDelIndex, 1);
  };

  // 删除状态弹出框取消按钮
  const handleCancel = () => {
    isDeleteState.value = false;
  };

  // 保存按钮
  const save = async () => {
    let flag = true; // 判断是否有空状态
    try {
      const data: any = {
        list: [],
      };
      for (let i = 0; i < stateLine.value.length - 1; i += 1) {
        if (stateLine.value[i].name === '') {
          Message.error('状态不能为空!');
          flag = false;
          break;
        }
        data.list.push(stateLine.value[i]);
      }
      if (flag) {
        await PutClientStateSet(data);
        getClientStateSet();
        isEdit.value = false;
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };

  // 取消按钮
  const cancel = () => {
    router.back();
  };
</script>

<style scoped lang="less">
  .client-effect-setting {
    padding-left: 40px;

    &-box {
      margin-top: 30px;

      .state-line {
        margin-top: 50px;

        :deep(.arco-timeline-item-label) {
          font-size: 16px;
          font-weight: 700;

          // :deep(.arco-timeline-item-dot-hollow) {
          //   left: -10px;
          //   border-width: 3px;
          // }
        }
      }

      :deep(.arco-timeline-item-dot) {
        width: 15px;
        height: 15px;
      }

      :deep(.arco-timeline-item-dot-hollow) {
        left: -7px;
        border-width: 3px;
      }

      :deep(.arco-timeline-item-dot-line) {
        top: 27px;
        border-left-width: 3px;
        left: 10%;
      }

      :deep(.arco-timeline-item-vertical-left.arco-timeline-item-label-relative
          > .arco-timeline-item-label) {
        left: -30px;
      }

      :deep(.arco-timeline-item-content) {
        margin-left: 30px;
      }

      :deep(.arco-input-wrapper .arco-input[disabled]) {
        -webkit-text-fill-color: #165dff;
      }

      :deep(.arco-icon) {
        font-size: 20px;
        margin-left: 10px;
      }
    }
  }
</style>
